<template>
	<view>
		<view class="head">
			<view class="left">
				<image src="../../static/icons/search.png" mode=""></image>
			</view>
			<view class="right">
				<image src="../../static/icons/cart.png" mode=""></image>
			</view>
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in list" :key="index">
				<image :src="item" mode="heightFix"></image>
			</swiper-item>
		</swiper>
		<view class="category">
			<view class="main" v-for="item in flList" :key="item.id"  @tap="gokind(item.id)">
				<image :src="item.icon" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="xslist">
			<view class="left">
				<image class="lb" src="../../static/icons/lb.png" mode=""></image>
				<text>限时活动:</text>
			</view>
			<view class="right" >
				<swiper :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500" :vertical="true" :circular="true">
					<swiper-item v-for="(item,index) in xsList" :key="index" >
						<view class="main" @tap="go(item.productId)">
							<view class="title">
								{{item.name}}
							</view>
							<view class="price">
								<view class="price-t">
									{{item.price}}元
								</view>
								<view class="price-b">
									{{item.promotionPrice}}元
								</view>
							</view>

						</view>
						
					</swiper-item>

				</swiper>
			</view>
		</view>
		<view class="hot">
			<span>热门推荐</span>
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="2000" :circular="true"
			 :display-multiple-items=3>
				<swiper-item v-for="item in hotList" :key="item.id" class="s1">
					<view class="swiper-item" @tap="go(item.id)">
						<image :src="item.pic" mode=""></image>
						<view class="text">{{item.name}}</view>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="product">
			<text class="title">新品推荐</text>
			<view class="productList">
				<view class="main" v-for="item in productList" :key="item.id" @tap="go(item.id)">
					<view class="left">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="right">
						<text>{{item.name}}</text>
						<text>价格:{{item.price}}元</text>
					</view>

				</view>
			</view>

		</view>
		<view class="guess">
			<text class="title">猜你喜欢</text>
			<view class="list">
				<view class="main" v-for="item in saleMostProductsList" :key="item.id" @tap="go(item.id)">
					<image :src="item.pic" mode=""></image>
					<view class="text-box">
						<view class="name">{{item.name}}</view>
						<view class="bottom">
							<text>￥{{item.price}}元</text>
							<text>乐居</text>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		recommendList,
		findCategory,
		hotList,
		lejuLatestProducts,
		saleMostProducts
	} from "../../api/home/index.js"
	export default {
		data() {
			return {
				list: [
					'../../static/images/home/banner1.png',
					'../../static/images/home/banner2.png',
					'../../static/images/home/banner3.png',
				],
				flList: [],
				xsList: [],
				hotList: [],
				productList: [],
				saleMostProductsList: [],
			};
		}, 
		onLoad() {
			this.getflList(),
				this.getxsList(),
				this.gethotList(),
				this.getlejuLatestProducts(),
				this.getsaleMostProducts()
		},
		methods: {
			getflList() {
				findCategory("1308336521604599809").then(res => {
					// console.log(res);
					this.flList = res.data.category.children;
					// console.log(this.flList)

				})
			},
			getxsList() {
				recommendList().then(res => {
					// console.log(res);
					this.xsList = res.data.items;
				})
			},
			gethotList() {
				hotList().then(res => {
					console.log(res);
					this.hotList = res.data.items;
				})
			},
			getlejuLatestProducts() {
				lejuLatestProducts().then(res => {
					// console.log(res);
					this.productList = res.data.productList
				})
			},
			getsaleMostProducts() {
				saleMostProducts().then(res => {
					// console.log(res);
					this.saleMostProductsList = res.data.items;

				})
			},
			go(val){
				console.log(val)
				uni.navigateTo({
					// pages/Detail/Detail
					// url:`../kind/kindList/kindList?id=${1}`
					url:`/pages/Detail/Detail?id=${val}`
				})
			},
			gokind(val){
				uni.navigateTo({
					url:`/pages/kind/kindList/kindList?id=${val}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './css/home.scss' 
</style>
